<template>
  <div class='wechat-guide-page'>
    <div class='wechat-guide-content'>
      <div class='guide-header'>绑定企业微信，将企业微信运营管理托管至平台<br>聚焦功能一体化，提高转化率</div>
      <ul class='guide-menu'>
        <li class='guide-menu-item'>
          <div class='item-icon icon1'></div>
          <div class='item-btn-active' @click="goToAuth()">已有企业微信号，立即绑定</div>
          <div class='item-tip'>为体验更多功能的使用<br>授权时请把所有权限统一授权给平台</div>
        </li>
        <li class='guide-menu-item'>
          <div class='item-icon icon2'></div>
          <div class='item-btn' @click="goToRegister()">没有企业微信号，立即申请</div>
          <div class='item-tip'>请在微信公众平台申请新的公众号<br>申请完成后，再到平台进行授权绑定</div>
        </li>
      </ul>
    </div>
    <!-- 添加企业号 -->
    <el-dialog
      append-to-body
      width="600px"
      title="添加企业号"
      :visible.sync="addDialogFormVisible"
      @close="resetAdd()">
      <el-form
        :model="addInfo"
        :rules="rulesAdd"
        ref="addCpRef"
        label-width="120px"
        label-position="left"
        class="demo-ruleForm">
        <el-form-item
          label="企业名称"
          prop="corpName">
          <el-input
            placeholder="请输入企业名称"
            v-model.trim="addInfo.corpName">
          </el-input>
        </el-form-item>
        <el-form-item
          label="企业ID（CorpID）"
          prop="corpId">
          <div style="display: flex">
            <el-input
              placeholder="请输入企业ID"
              v-model.trim="addInfo.corpId">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="客户联系Secret"
          prop="contactSecret">
          <div style="display: flex">
            <el-input
              placeholder="请输入客户联系Secret"
              v-model.trim="addInfo.contactSecret">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="通讯录Secret"
          prop="customerSecret">
          <el-input
            placeholder="请输入通讯录Secret"
            v-model.trim="addInfo.customerSecret">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmAdd()">确定</el-button>
        <el-button size="small" @click="addDialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      addDialogFormVisible: false,
      addInfo: {
        corpName: '',
        corpId: '',
        contactSecret: '',
        customerSecret: ''
      },
      rulesAdd: {
        corpName: [{required: true, message: '必填，请输入企业名称', trigger: 'blur'}],
        corpId: [{required: true, message: '必填，请输入企业ID', trigger: 'blur'}],
        contactSecret: [{required: true, message: '必填，请输入客户联系Secret', trigger: 'blur'}],
        customerSecret: [{required: true, message: '必填，请输入通讯录Secret', trigger: 'blur'}]
      }
    }
  },
  methods: {
    // 手动授权
    goToAuth () {
      this.addDialogFormVisible = true
    },
    confirmAdd () {
      this.$refs.addCpRef.validate((valid) => {
        if (valid) {
          this.saveAdd()
        }
      })
    },
    saveAdd () {
      let url = `${this.SERVICE_CP}/save`
      let params = {
        corpName: this.addInfo.corpName,
        corpId: this.addInfo.corpId,
        contactConfig: {secret: this.addInfo.contactSecret},
        customerConfig: {secret: this.addInfo.customerSecret}
      }
      this.posts(url, params).then(res => {
        if (res.data.code === 200) {
          this.$emit('success')
          this.showSucc(res.data.message)
          this.addDialogFormVisible = false
        }
        this.loading = false
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    // 重置表单
    resetAdd () {
      this.addInfo = {
        corpName: '',
        corpId: '',
        contactSecret: '',
        customerSecret: ''
      }
    },
    // 申请企业号
    goToRegister () {
      window.open('https://work.weixin.qq.com/')
    }
  }
}
</script>
<style lang="stylus" scoped>
.wechat-guide-page
  position relative
  background #ffffff
  border-radius 6px
  box-sizing border-box
  height 100%
  .wechat-guide-content
    position absolute
    top 0
    bottom 0
    // left 80px
    // right 80px
    left 190px
    right 190px
    max-width: 1244px;
    margin auto
    display flex
    flex-direction column
    .guide-header
      flex none
      line-height 30px
      font-size 18px
      font-weight 700
      color #22242F
      text-align center
      padded_box(border-box, 20px 0 50px)
    .guide-menu
      flex 1
      display flex
      max-height 400px
      .guide-menu-item
        flex 1
        min-width 200px
        display flex
        flex-direction column
        // justify-content center
        align-items center
        border 1px solid #ddd
        border-radius 10px
        padded_box(border-box, 80px 0 0)
        margin-right 54px
        &:last-child
          margin-right 0
        .item-icon
          width 106px
          height 106px
          // width 100px
          // height 100px
          margin-bottom 20px
          &.icon1
            background url('~assets/img/icon-qiwei@2x.png') no-repeat left 3px center / 100%
          &.icon2
            background url('~assets/img/ic_shengqing@2x.png') no-repeat 0 0 / 100%
        .item-btn-active, .item-btn
          // width 180px
          height 40px
          line-height 40px
          text-align center
          font-size 14px
          font-weight 400
          border-radius 6px
          cursor pointer
          padding 0 18px
        .item-btn-active
          color #fff
          background #4C84FF
        .item-btn
          color #4C84FF
          border 1px solid #4C84FF
        .item-tip
          text-align center
          // margin-top 40px
          // line-height: 26px;
          // font-size: 16px;
          margin-top 20px
          line-height: 22px;
          font-size: 14px;
          color: #888B9C;
          .add-wechats
            cursor pointer
            color rgba(76, 132, 255, 1)
            cursor pointer
            text-decoration underline
</style>
